<!-- 
    Refer to https://github.com/quolc/neural-collage/blob/master/templates/demo_feature_blending/layout.html
 -->

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  {% if title %}
  <title>{{ title }}</title>
  {% endif %}
  <!-- Bootstrap -->
  <link rel="stylesheet" href="/app/static/components/css/bootstrap.min.css">
  <link href="/app/static/components/css/bootstrap-slider.min.css"
    rel="stylesheet">
  <link href="/app/static/components/css/image-picker.css" rel="stylesheet">
  <link href="/app/static/components/css/main.css" rel="stylesheet">

</head>

<body>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="/app/static/components/js/jquery.min.js"></script>
  <script src="/app/static/components/js/popper.min.js"></script>
  <script src="/app/static/components/js/bootstrap.min.js"></script>

  <!--<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"-->
    <!--integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"-->
    <!--crossorigin="anonymous"></script>-->

  <script src="/app/static/components/js/image-picker.min.js"></script>
  <script src="/app/static/components/js/bootstrap-slider.min.js"></script>
  <script src="/app/static/components/js/agh.sprintf.js"></script>
  <script src="/app/static/components/js/p5.min.js"></script>

  <script>
    canvas_size = {{ canvas_size | tojson }};
    base_path = {{ base_path | tojson }};
    image_paths = {{ image_paths | tojson }};
  </script>

  <script src="/app/static/components/js/main.js"></script>

  {% block content %}{% endblock %}
</body>

</html>